import React, { useLayoutEffect, useState } from 'react'

/**
 * 
 * @returns 
 * useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；
 */
export default function LayoutEffectHookDemo() {
  const [count, setCount] = useState(10);

  useLayoutEffect(() => {
    if(count === 0) {
      setCount(Math.random() + 2000)
    }
  }, [count])
  
  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={e => setCount(0)}>修改</button>
    </div>
  )
}
